<script lang="ts" setup>
/**
 * Props
 * @mask 是否可通过点击遮罩层关闭弹窗
 * 默认 false
 *
 * Expose
 * @change 显示 / 隐藏
 *
 * Slot 内容区域
 */
import { ref } from 'vue'

const props = defineProps({
  mask: {
    type: Boolean,
    required: false,
    default: false,
  },
})
defineExpose({
  change,
})

// 是否显示
const isShow = ref(false)
// 特效延迟
const cache = ref(false)

// 显示/隐藏
function change() {
  cache.value = isShow.value
  setTimeout(() => {
    isShow.value = !isShow.value
  }, 150)
}
// 遮罩层点击
function maskClick() {
  if (!props?.mask) return
  cache.value = true
  setTimeout(() => { isShow.value = false }, 150)
}

</script>

<template>
  <div
    :class="(cache ? 'fadeOut' : '')"
    :style="{bottom: isShow ? 0 : '300vh'}"
    class="prm-drawer vivify duration-150 fadeIn"
    @tap.stop="maskClick"
  >
    <div
      :class="(cache ? 'fadeOutBottom' : '')"
      class="prm-drawer-content vivify fadeInBottom duration-300"
      @tap.stop
    >
      <slot />
    </div>
  </div>
</template>

<style lang="less" scoped>
.prm-drawer {
  position: fixed;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.65);
  //transition: all .3s;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  .prm-drawer-content {
    width: 100%;
  }
}
</style>
